// import React, { Component } from 'react';
// import Category from '../../components/Category';
// import CateInput from '../../components/CateInput'

// class Cate extends Component {
//     render() {
//         return (
//             <div className='cate'>
//                 {/* 分类页输入框 */}
//                 <CateInput />
//                 {/* 分类页列表 */}
//                 <Category/>
//             </div>
//         );
//     }
// }

// export default Cate;


import React, { Component } from 'react';
import CateInput from '../../components/CateInput'
import '../../styles/Category.scss'

//集体导入并重命名
import * as service from '../../api/index'
// import { category_list, category_subcate } from '../api'

class Cate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0,
            list: [],
            subcate: {}
        }
    }
    componentDidMount() {
        service.category_list().then((res) => {
            this.setState({
                list: res.data.list
            })
            //请求第一个一级分类对应的二三级分类
            service.category_subcate({ id: res.data.list[0].id }).then((res) => {
                this.setState({
                    subcate: res.data.subcate
                })
            })
        })

    }

    handelClick(index, id) {
        service.category_subcate({ id }).then((res) => {
            // console.log(res.data.subcate);
            this.setState({
                subcate: res.data.subcate
            })
        })
        // console.log(index);
        this.setState({
            currentIndex: index
        })
    }
    toAllGood(id) {
        //跳路由 到所有商品页,并且携带三级分类id
        this.props.history.push({ pathname: '/index/allgoods', state: { id } })
        console.log(id);
    }

    render() {
        return (
            <>
                <CateInput />
                <div className='cate-first'>
                    {/* 一级分类 */}
                    <div className='left'>
                        {
                            this.state.list.map((item1, index) => {
                                return (
                                    <div className={`btn ${this.state.currentIndex === index ? 'active' : ''}`} key={index} onClick={() => { this.handelClick(index, item1.id) }}>{item1.name}</div>
                                    // <div className='btn' key={index} >{item.name}</div>
                                )
                            })
                        }
                    </div>
                    <div className="right">
                        {/* 二级分类 */}
                        {
                            this.state.subcate.subcategory &&
                            this.state.subcate.subcategory.map((item2, index) => {
                                return (
                                    <div className='box' key={index}>
                                        <h3>{item2.name}</h3>
                                        {/* 三级分类 */}
                                        <div className="list">
                                            {
                                                item2.subNavs.map((item3, index) => {
                                                    return (
                                                        <div className='cate-pro' key={index} onClick={() => { this.toAllGood(item3.id) }}>
                                                            <img src={item3.pic} />
                                                            <div className='proname'>{item3.name}</div>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </>
        );
    }
}

export default Cate;